<template>
	<view class="content">
		<!-- 已付款 -->
		<view class="payPage" v-if="DateilData.state == '已付款' || DateilData.state == '已取票'">
			<view class="box">
				<uni-icons type="checkmarkempty" size="40" color="#fff"></uni-icons>
				<uni-title type="h2" :title="DateilData.state" color="#fff"></uni-title>
				<uni-title type="h2" title=",请保持购票啦" color="#fff"></uni-title>
			</view>
			<!-- 车次信息 -->
			<view class="box1">
				<!-- 列车信息 -->
				<text>取票号：JJ565125</text>
				<view class="carDetail">
					<!-- 开始的地点-时间 日期 -->
					<view class="startInfo trainItem">
						<text class="city">06月15日周二</text>
						<text class="time">08:30</text>
						<text class="dates">{{DateilData.chufadidian}}</text>
					</view>
					<!-- 耗时 和 车次、 -->
					<view class="trainnumber trainItem">
						<!-- <text>{{trainNumberData.allTimes}}</text> -->
						<text>经停信息</text>
						<text class="dates">G7740</text>
					</view>
					<!-- 结束时间 地点 日期 -->
					<view class="endInfo trainItem">
						<text class="city">06月15日周二</text>
						<text class="time">06:24</text>
						<text class="dates">{{DateilData.daodadidian}}</text>
					</view>
				</view>
				<!-- 身份证等信息 -->
				<view class="customerInfo">
					<view class="left">
						<text> {{DateilData.chencheren}} <text
								style="background-color: white; border: 1px solid #1AA034; border-radius: 5px;padding: 5rpx;">成人票</text>
						</text>

						<text>110102********28</text>
						<text style="color: #1AA034;">出票成功</text>
					</view>
					<view class="right">
						<text>{{DateilData.leixing}}{{DateilData.piaojia}}</text>
						<text><text
								style="background-color: white; border: 1px solid #1AA034; border-radius: 5px; color: #1AA034;padding: 5rpx;">靠窗
							</text>
							{{DateilData.zuohao}} </text>
					</view>
				</view>
			</view>
			<!-- 订单号 -->
			<view class="box2">
				<u-cell-group>
					<u-cell title="订单号" value="E2352523652"></u-cell>
					<u-cell title="通知手机" value="1616646482"></u-cell>
				</u-cell-group>
			</view>
			<view class="box3">
				<u-cell-group>
					<u-cell title="订单号" value="E2352523652"></u-cell>
					<u-cell title="订单总计" :value="`￥${DateilData.piaojia}`"></u-cell>
				</u-cell-group>
			</view>
			<!-- <view class="payBtn">
				去支付
			</view> -->
		</view>



		<!-- 待付款 -->
		<view class="payPage" v-if="DateilData.state == '代付款'">
			<view class="box">
				<uni-icons type="checkmarkempty" size="40" color="#fff"></uni-icons>
				<uni-title type="h2" :title="DateilData.state" color="#fff"></uni-title>
				<uni-title type="h2" title=",支付剩余:" color="#fff"></uni-title>
				<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss" color="red" size="40"></u-count-down>
			</view>
			<!-- 车次信息 -->
			<view class="box1">
				<!-- 列车信息 -->
				<text>取票号：JJ565125</text>
				<view class="carDetail">
					<!-- 开始的地点-时间 日期 -->
					<view class="startInfo trainItem">
						<text class="city">06月15日周二</text>
						<text class="time">08:30</text>
						<text class="dates">{{DateilData.chufadidian}}</text>
					</view>
					<!-- 耗时 和 车次、 -->
					<view class="trainnumber trainItem">
						<!-- <text>{{trainNumberData.allTimes}}</text> -->
						<text>经停信息</text>
						<text class="dates">G7740</text>
					</view>
					<!-- 结束时间 地点 日期 -->
					<view class="endInfo trainItem">
						<text class="city">06月15日周二</text>
						<text class="time">06:24</text>
						<text class="dates">{{DateilData.daodadidian}}</text>
					</view>
				</view>
				<!-- 身份证等信息 -->
				<view class="customerInfo">
					<view class="left">
						<text> {{DateilData.chencheren}} <text
								style="background-color: white; border: 1px solid #1AA034; border-radius: 5px;padding: 5rpx;">成人票</text>
						</text>

						<text>110102********28</text>
						<text style="color: #1AA034;">出票成功</text>
					</view>
					<view class="right">
						<text>{{DateilData.leixing}}{{DateilData.piaojia}}</text>
						<text><text
								style="background-color: white; border: 1px solid #1AA034; border-radius: 5px; color: #1AA034;padding: 5rpx;">靠窗
							</text>
							{{DateilData.zuohao}} </text>
					</view>
				</view>
			</view>
			<!-- 订单号 -->
			<view class="box2">
				<u-cell-group>
					<u-cell title="订单号" value="E2352523652"></u-cell>
					<u-cell title="通知手机" value="1616646482"></u-cell>
				</u-cell-group>
			</view>
			<view class="box3">
				<u-cell-group>
					<u-cell title="订单号" value="E2352523652"></u-cell>
					<u-cell title="订单总计" :value="`￥${DateilData.piaojia}`"></u-cell>
				</u-cell-group>
			</view>
			<button class="payBtn" @click="switchColor">  
				去支付
		    </button>
		</view>


		<!-- 已取消 -->
		<view class=" payPage" v-if="DateilData.state == '已取消'">
				<view class="box">
					<uni-icons type="checkmarkempty" size="40" color="#fff"></uni-icons>
					<uni-title type="h2" :title="DateilData.state" color="#fff"></uni-title>
					<uni-title type="h2" title=",您的订单已超时取消, 可重新订购" color="#fff"></uni-title>
				</view>
				<!-- 车次信息 -->
				<view class="box1">
					<!-- 列车信息 -->
					<text>取票号：JJ565125</text>
					<view class="carDetail">
						<!-- 开始的地点-时间 日期 -->
						<view class="startInfo trainItem">
							<text class="city">06月15日周二</text>
							<text class="time">08:30</text>
							<text class="dates">{{DateilData.chufadidian}}</text>
						</view>
						<!-- 耗时 和 车次、 -->
						<view class="trainnumber trainItem">
							<!-- <text>{{trainNumberData.allTimes}}</text> -->
							<text>经停信息</text>
							<text class="dates">G7740</text>
						</view>
						<!-- 结束时间 地点 日期 -->
						<view class="endInfo trainItem">
							<text class="city">06月15日周二</text>
							<text class="time">06:24</text>
							<text class="dates">{{DateilData.daodadidian}}</text>
						</view>
					</view>
					<!-- 身份证等信息 -->
					<view class="customerInfo">
						<view class="left">
							<text> {{DateilData.chencheren}} <text
									style="background-color: white; border: 1px solid #1AA034; border-radius: 5px;padding: 5rpx;">成人票</text>
							</text>

							<text>110102********28</text>
							<text style="color: #1AA034;">出票成功</text>
						</view>
						<view class="right">
							<text>{{DateilData.leixing}}{{DateilData.piaojia}}</text>
							<text><text
									style="background-color: white; border: 1px solid #1AA034; border-radius: 5px; color: #1AA034;padding: 5rpx;">靠窗
								</text>
								{{DateilData.zuohao}} </text>
						</view>
					</view>
				</view>
				<!-- 订单号 -->
				<view class="box2">
					<u-cell-group>
						<u-cell title="订单号" value="E2352523652"></u-cell>
						<u-cell title="通知手机" value="1616646482"></u-cell>
					</u-cell-group>
				</view>
				<view class="box3">
					<u-cell-group>
						<u-cell title="订单号" value="E2352523652"></u-cell>
						<u-cell title="订单总计" :value="`￥${DateilData.piaojia}`"></u-cell>
					</u-cell-group>
				</view>
				<!-- <view class="payBtn">
				去支付
			</view> -->
				<button class="button" type="primary" @click="switchColor"
					style="width: 90%; border-radius: 50px; background-color: orange; margin-top: 15px;">重新订购</button>

			</view>

		</view>

</template>

<script>
	export default {
		data() {
			return {
				DateilData: {},
				openid: '',
			}
		},
		onLoad(option) {
			let _this = this
			console.log('option', option.itemdata)
			// 解码
			const codedata = decodeURIComponent(option.itemdata)
			const jsondata = JSON.parse(codedata)
			_this.DateilData = jsondata
			console.log('_this.DateilData', _this.DateilData)
		},
		methods: {
			getobder() {
				uni.request({
					url: "http://localhost:8000/pay/placeOrder",
					method: "POST",
					data: {
						openid: this.openid,
						total: 1,
						description: "企鹅",
						out_trade_no: "100143578fded"
					},
					success(results) {

						if (results.data.code == 200) {
							const {
								appid,
								nonceStr,
								package: pkg,
								timeStamp,
								signType,
								paySign
							} = results.data.data

							uni.requestOrderPayment({
								timeStamp,
								nonceStr,
								package: pkg,
								signType,
								paySign,
								// 支付成功的回调函数
								success(res) {
									console.log('res---=====支付成功', res)
									uni.showToast({
										title: "支付成功"
									})
								},

								fail(res) {
									console.log('支付失败', res)
									wx.showToast({
										title: '你竟然取消支付！',
										icon: 'error'
									})
								}
							})
						}
					}
				})
			},
			switchColor() {
				let _this = this
				uni.login({
					success(res) {
						console.log('res', res.code)
						if (res.code) {
							uni.request({
								url: "https://api.weixin.qq.com/sns/jscode2session",
								method: "GET",
								data: {
									appid: "wxe5f62bc262ee9106",
									secret: "70fa451aaef41134568ca23551dea91f",
									js_code: res.code,
									grant_type: "authorization_code"
								},
								success(result) {
									if (result.data.openid) {
										_this.openid = result.data.openid
										console.log(_this.openid, "openid")
										_this.getobder()
									}
								}
							})
						}
					}
				})

			},

		}
	}
</script>

<style lang="less" scoped>
	html,
	body {
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		background-color: #ccc;
	}

	.payPage {
		width: 100%;
		height: 100%;
		background-color: #F4F4F4;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;

		.box {
			width: 100%;
			height: 350rpx;
			background-color: #1BA9BA;
			border-radius: 0 0 40rpx 40rpx;
			display: flex;

		}

		.box1 {
			width: 95%;
			height: 530rpx;
			background-color: #fff;
			border-radius: 30rpx;
			margin-top: -220rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;

			// 顶部信息
			.carDetail {
				width: 100%;
				height: 200rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-bottom: 30rpx;

				.trainItem {
					width: 200rpx;
					height: 90%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					line-height: 60rpx;
				}

				.city {
					font-size: 40rpx;
					text-align: center;
				}

				.time {
					font-size: 40;
					font-weight: 700;
				}

				.dates {
					color: #666;
					font-size: 25rpx;
				}

			}

			.customerInfo {
				width: 92%;
				height: 200rpx;
				background-color: #F4F4F4;
				border-radius: 15rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.left {
					width: 45%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
				}

				.right {
					width: 45%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					align-items: flex-end;
				}
			}
		}

		.box2 {
			width: 90%;
			height: 180rpx;
			background-color: #fff;
			border-radius: 15rpx;
			margin-top: 25rpx;
		}

		.box3 {
			width: 90%;
			height: 180rpx;
			background-color: #fff;
			border-radius: 15rpx;
			margin-top: 25rpx;
		}

		.payBtn {
			border-radius: 50rpx;
			width: 90%;
			height: 100rpx;
			background-color: orange;
			margin-top: 20rpx;
			color: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 23px;
		}
	}
</style>